<template>
	<view class="site-info">
		<u-sticky>
			<view class="site-swiper">
				<u-swiper :list="siteInfo.siteImgs" keyName="url" indicator height="200" indicatorMode="dot" :autoplay="false"></u-swiper>
				<u-cell :title="siteInfo.siteName">
					<template #label>
						<view class="u-line-3 label-box u-tips-color">{{ siteInfo.siteRemark || '暂无备注' }}</view>
					</template>
					<template #value>
						<view class="u-flex" @click="openMap" style="line-height: 38rpx;">
							<view class="distance-box">{{ putDistance(distanceInfo.linearDistance) }}</view>
							<u-icon name="map-fill" color="#f20" size="22"></u-icon>
						</view>
					</template>
				</u-cell>
			</view>
		</u-sticky>
		<view class="eq-list">
			<view class="cell-item u-m-b-30" v-for="item in siteInfo.equipmentList" :key="item.id" @click="jumpPage(item)">
				<u-cell :title="item.eqName" :label="filterPort(item.portList)" :isLink="true"></u-cell>
			</view>
		</view>
	</view>
</template>

<script>
import { putDistance } from '@/static/js/putDistance.js';
export default {
	async onLoad(option) {
		this.getSiteInfo(option.id);
	},
	data() {
		return {
			putDistance, // 计算两地的骑行距离函数
			latitude: 0, // 当前位置的纬度
			longitude: 0, // 当前位置的经度
			// 站点信息
			siteInfo: {
				siteImgs: [] // 站点图片
			},
			distanceInfo: {
				linearDistance: 0
			}
		};
	},
	methods: {
		// 跳转详情
		jumpPage(item) {
			uni.navigateTo({
				url: '/packHome/eqmuipmentInfo/eqmuipmentInfo?id=' + item.id
			});
		},
		// 过滤端口状态
		filterPort(info) {
			if (!info) return '无端口';
			const freeInfo = info.filter(item => item.portStatus === 0);
			return freeInfo.length + '个端口处于空闲状态';
		},
		// 获取站点详情
		async getSiteInfo(id) {
			const res = await this.$api.site.siteInfo({ id });
			if (res.code === 200) {
				res.data.siteLatitude = parseFloat(res.data.siteLatitude);
				res.data.siteLongitude = parseFloat(res.data.siteLongitude);
				this.siteInfo = res.data;
				this.getLocation();
			}
		},
		// 获取当前位置
		getLocation() {
			uni.getLocation({
				type: 'wgs84',
				success: res => {
					this.longitude = res.longitude;
					this.latitude = res.latitude;
					this.getBicycling();
				}
			});
		},
		// 获取两地之间的骑行距离
		async getBicycling() {
			const { id } = this.siteInfo;
			const params = {
				longitude: this.longitude, // 当前位置经度
				latitude: this.latitude, // 当前位置纬度
				id
			};
			// 获取两点的直线主力
			const res = await this.$api.site.siteLinearDistance(params);
			if (res.code === 200) {
				this.distanceInfo = res.data;
			}
		},
		// 打开内置地图
		openMap() {
			const { siteLatitude, siteLongitude } = this.siteInfo;
			uni.openLocation({
				latitude: siteLatitude,
				longitude: siteLongitude
			});
		}
	}
};
</script>

<style lang="scss">
.site-swiper {
	background: #fff;
	.distance-box {
		font-size: 32rpx;
		color: #f20;
		font-weight: bold;
	}
	.label-box {
		font-size: 22rpx;
	}
}

.eq-list {
	padding: 40rpx;
	.cell-item {
		box-shadow: 4px 3px 4px 3px #e0e0e0;
		background-color: #fff;
	}
}
</style>
